<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜品销售统计105"
      row-key="id"
      show-summary
      :columns="columns"
      :request-api="getPageReport"
      :init-param="initData"
      :summary-method="getSummaries"
      :data-callback="dataCallback"
      @search="onSearch"
    >
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="storeSalesSummary">
import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";

const proTable = ref<ProTableInstance>();
// 新建默认数据
const initData = reactive({
  reportId: 105
});

const columns: ColumnProps<Inventory.ResCustomList>[] = [
  {
    type: "index",
    label: "序号",
    width: 80,
    search: {
      el: "date-picker",
      label: "日期",
      key: "dataTimeRange",
      defaultValue: [formatDate(-1, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    sortable: true,
    prop: "columnTypes",
    label: "统计方式",
    align: "left",
    minWidth: 120,
    isShow: false,
    enum: [
      { label: "菜品名称", value: 1 },
      { label: "菜品规格", value: 2 },
      { label: "菜品分类", value: 3 }
    ],
    search: { el: "select", defaultValue: 1, key: "appointType" }
  },
  {
    sortable: true,
    prop: "saleType",
    label: "销售方式",
    align: "left",
    minWidth: 120,
    isShow: false,
    enum: [
      { label: "单品", value: 1 },
      { label: "套餐", value: 2 },
      { label: "单品+套餐", value: 3 },
      { label: "套餐明细", value: 4 },
      { label: "单品+套餐明细", value: 5 }
    ],
    search: { el: "select" }
  },
  {
    sortable: true,
    prop: "foodName",
    label: "菜品名称",
    minWidth: 240,
    align: "left",
    isShow: true
  },
  {
    sortable: true,
    prop: "foodCategoryName",
    label: "菜品分类名称",
    isShow: false,
    minWidth: 140,
    align: "left"
  },

  {
    sortable: true,
    prop: "specName",
    label: "菜品规格",
    minWidth: 120,
    isShow: false,
    align: "left"
  },

  { sortable: true, prop: "quantity", label: "销售数量", minWidth: 120, align: "left" },
  { sortable: true, prop: "quantityRate", label: "销售数量占比", width: 140, align: "left" },
  { sortable: true, prop: "allAmount", label: "销售额", minWidth: 120, align: "left" },
  { sortable: true, prop: "allAmountRate", label: "销售额占比", minWidth: 210 },
  { sortable: true, prop: "realAmount", label: "菜品收入", minWidth: 120, align: "left" },
  { sortable: true, prop: "realAmountRate", label: "菜品收入占比", width: 140, align: "left" },
  { sortable: true, prop: "discountAmount", label: "菜品优惠", minWidth: 120, align: "left" },
  { sortable: true, prop: "discountAmountRate", label: "菜品优惠占比", minWidth: 150, align: "left" },
  { sortable: true, prop: "feedAmount", label: "加料加价", minWidth: 120, align: "left" },
  { sortable: true, prop: "taskAmount", label: "做法加价", minWidth: 120, align: "left" }
];

const summary = ref([]);
const dataCallback = (data: any) => {
  summary.value = data.summary;
  if (proTable.value!.searchParam.columnTypes === 1) {
    columns[3].isShow = true;
    columns[4].isShow = false;
    columns[5].isShow = false;
  } else if (proTable.value!.searchParam.columnTypes === 2) {
    columns[3].isShow = true;
    columns[4].isShow = true;
    columns[5].isShow = false;
  } else if (proTable.value!.searchParam.columnTypes === 3) {
    columns[3].isShow = false;
    columns[4].isShow = false;
    columns[5].isShow = true;
  }
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const getSummaries = (param: any) => {
  return summary.value;
  // const { columns } = param;
  // const sums: string[] = [];
  // columns.forEach((column, index) => {
  //   sums[index] = summary.value[index];
  //   return sums;
  // });
  // return sums;
};

const onSearch = () => {
  if (proTable.value?.searchParam.appointType === 3) {
    columns[3].isShow = false;
    columns[4].isShow = true;
    columns[5].isShow = false;
  } else if (proTable.value?.searchParam.appointType === 2) {
    columns[3].isShow = true;
    columns[4].isShow = false;
    columns[5].isShow = true;
  } else {
    columns[3].isShow = true;
    columns[4].isShow = false;
    columns[5].isShow = false;
  }
};
</script>
